<template>
  <div class="mission">
    <div class="mission-container">
      <div class="carousel">轮播图</div>
      <div class="content">
        <div class="content-left">
          <div class="content-header">
            <ul>
              <li
                v-for="(item, index) in navs"
                :key="index"
                :class="{ active: $route.name === item.name }"
                @click="$router.push({ name: item.name })"
              >
                {{ item.title }}
              </li>
            </ul>
            <div class="header-search">
              <el-input
                :placeholder="'搜索' + $route.meta.title!.toString()"
                size="large"
                class="input-with-select"
              >
                <template #append>
                  <div class="btn">
                    <sway-icon name="sousuo1" :size="20" color="white" />
                  </div>
                </template>
              </el-input>
            </div>
          </div>
          <div class="content-filter">
            <div class="type">
              <span>任务类型</span>
              <ul>
                <li
                  v-for="(item, index) in currentFilter?.type"
                  :key="index"
                  :class="{ active: item.active }"
                  @click="chooseType(index)"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
            <div class="planB">
              <span>金额范围</span>
              <ul>
                <li
                  v-for="(item, index) in currentFilter?.planB"
                  :key="index"
                  :class="{ active: item.active }"
                  @click="choosePlanB(index)"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
          </div>
          <div class="content-mission-list">
            <router-view></router-view>
          </div>
        </div>
        <div class="content-right"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed, ref } from "vue";
import { useRoute } from "vue-router";

interface FilterType {
  type: { id: number; name: string; active?: boolean }[];
  planB: { id: number; min: number; max: number; name: string; active?: boolean }[];
}

const route = useRoute();
const navs = reactive<
  {
    id: number;
    title: string;
    name: string;
    filters?: FilterType;
  }[]
>([
  {
    id: 1,
    title: "全部任务",
    name: "Mission-Home",
    filters: {
      type: [
        { id: 1, name: "不限", active: true },
        { id: 2, name: "文案" },
        { id: 3, name: "设计" },
        { id: 4, name: "开发" },
        { id: 5, name: "测试" },
        { id: 6, name: "翻译" },
        { id: 8, name: "其他" }
      ],
      planB: [
        { id: 1, name: "不限", min: 0, max: 0, active: true },
        { id: 2, name: "100以内", min: 0, max: 5000 },
        { id: 3, name: "100-500", min: 100, max: 500 },
        { id: 4, name: "500-1千", min: 5000, max: 10000 },
        { id: 5, name: "1千-5千", min: 5000, max: 10000 },
        { id: 6, name: "5千-1万", min: 5000, max: 10000 },
        { id: 7, name: "1万以上", min: 10000, max: 0 }
      ]
    }
  },
  {
    id: 2,
    title: "悬赏任务",
    name: "Mission-Reward",
    filters: {
      type: [
        { id: 1, name: "不限", active: true },
        { id: 2, name: "文案" },
        { id: 3, name: "设计" },
        { id: 4, name: "开发" },
        { id: 5, name: "测试" },
        { id: 6, name: "翻译" },
        { id: 8, name: "其他" }
      ],
      planB: [
        { id: 1, name: "不限", min: 0, max: 0, active: true },
        { id: 2, name: "100以内", min: 0, max: 5000 },
        { id: 3, name: "100-500", min: 100, max: 500 },
        { id: 4, name: "500-1千", min: 5000, max: 10000 },
        { id: 5, name: "1千-5千", min: 5000, max: 10000 },
        { id: 6, name: "5千-1万", min: 5000, max: 10000 },
        { id: 7, name: "1万以上", min: 10000, max: 0 }
      ]
    }
  },
  {
    id: 3,
    title: "数据标注",
    name: "Mission-Tag",
    filters: {
      type: [
        { id: 1, name: "不限", active: true },
        { id: 2, name: "标注类1" },
        { id: 3, name: "标注类2" },
        { id: 4, name: "其他" }
      ],
      planB: [
        { id: 1, name: "不限", min: 0, max: 0, active: true },
        { id: 2, name: "100以内", min: 0, max: 5000 },
        { id: 3, name: "100-1万", min: 100, max: 500 },
        { id: 4, name: "1万以上", min: 10000, max: 10000 }
      ]
    }
  }
]);

const currentFilter = computed<FilterType | null>(() => {
  const name = route.name?.toString();
  const index = navs.findIndex((item) => item.name === name);
  return navs[index].filters || null;
});

const chooseType = (currentIndex: number) => {
  currentFilter.value?.type.forEach((item, index) => {
    item.active = index === currentIndex ? true : false;
  });
};
const choosePlanB = (currentIndex: number) => {
  currentFilter.value?.planB.forEach((item, index) => {
    item.active = index === currentIndex ? true : false;
  });
};
</script>

<style lang="less" scoped>
.mission {
  position: relative;
  width: 100%;
  height: 100%;
  &-container {
    width: 70%;
    height: 800px;
    margin: 0 auto;
  }
}
.carousel {
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
  background-color: skyblue;
}
.content {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: calc(100% - 120px);
  &-left {
    width: 70%;
    height: 100%;
  }
  &-right {
    width: 28%;
    height: 100%;
    margin-left: 2%;
    background-color: rgb(228, 228, 228);
  }

  &-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    background-color: rgb(247, 247, 247);
    .active {
      color: rgb(19, 136, 182);
      &::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 60%;
        height: 4px;
        border-radius: 4px;
        background-color: rgb(19, 136, 182);
      }
    }
    ul {
      display: flex;
      flex-direction: row;
      li {
        position: relative;
        line-height: 50px;
        padding: 0 20px;
        font-weight: 600;
        cursor: pointer;
      }
    }
    .header-search {
      width: 50%;
      ::v-deep(.el-input-group__append) {
        padding: 0;
      }
      .btn {
        width: 60px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: #1890ff;
        cursor: pointer;
      }
    }
  }

  &-filter {
    width: 100%;
    height: 140px;
    margin-bottom: 20px;
    background-color: antiquewhite;
    .type {
      display: flex;
      flex-direction: row;
      padding: 20px;
      box-sizing: border-box;
      span {
        font-size: 16px;
        font-weight: 600;
        margin-right: 20px;
      }
      ul {
        display: flex;
        flex-direction: row;
        li {
          margin-right: 20px;
          cursor: pointer;
        }
        .active {
          color: white;
          background-color: #1890ff;
        }
      }
    }

    .planB {
      display: flex;
      flex-direction: row;
      padding: 20px;
      box-sizing: border-box;
      span {
        font-size: 16px;
        font-weight: 600;
        margin-right: 20px;
      }
      ul {
        display: flex;
        flex-direction: row;
        li {
          margin-right: 20px;
          cursor: pointer;
        }
        .active {
          color: white;
          background-color: #1890ff;
        }
      }
    }
  }

  &-mission-list {
    width: 100%;
    height: auto;
    // background-color: rgb(190, 240, 223);
  }
}
</style>
